<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <style>
        .left {
            width: 500px;
            float: left;
            background-color: lightblue;
        }

        .right {
            margin-left: 20px;
            width: 500px;
            float: left;
            background-color: pink ;
        }
        span{
            width: 80px;
            float: right;
        }
        li{
            list-style: none;
            height: 30px;
        }
    </style>
    <!-- 引入axios库 -->
     <script src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div class="left">
        <h1>图书列表</h1>
        <ul>
            <li>获取中... <a href="./book2.html?id=1111">修改</a></li>
        </ul>
    </div>
    <div class="right">
        <h2>添加图书</h2>
        <ul>
            <li>图书名称：<input type="text" name="bookname" id=""></li>
            <li>图书作者：<input type="text" name="author" id=""></li>
            <li>书出版社：<input type="text" name="publisher" id=""></li>
            <li>书创建者：<input type="text" name="creator" id=""></li>
            <li><button>提交</button></li>
        </ul>
    </div>
    <script>
        // 一开始，添加、删除、修改，都重新渲染整个页面，所以要把这些封装成一个函数
        function showData(creator){
            axios
            .get('https://hmajax.itheima.net/api/books?creator='+creator)
            .then((res)=>{
                // console.log(a.data.data);
                const arr = res.data.data; // 数组
                document.querySelector('ul').innerHTML = arr.map((book)=>{
                    return `<li>编号：${book.id} 书名：${book.bookname}<span><button data-id='${book.id}'>删除</button></span></li>`
                }).join('')})
            .catch(function(){})
        }
        showData('lb')

        // 添加模块
        const button = document.querySelector('button')
        const bookname = document.querySelector('[name = "bookname"]')
        const author = document.querySelector('[name = "author"]')
        const publisher = document.querySelector('[name = "publisher"]')
        const creator = document.querySelector('[name = "creator"]')

        // 点击，要得到一个对象，并提交给一个网址
        button.addEventListener('click',function(){
            // 从表单获取内容
            const book = {
                "bookname":bookname.value,
                "author":author.value,
                "publisher":publisher.value,
                "creator":creator.value
            }
            // 利用axios提交这个对象
            addBook(book)
        })
        // 添加书本的函数
        function addBook(book){
            // 利用axios提交这个对象
            axios.post('https://hmajax.itheima.net/api/books',book)
            .then((res)=>{
                alert(res.data.message)
                bookname.value = ''
                author.value = ''
                publisher.value = ''
                creator.value = ''
                // 添加后要重新渲染
                showData('lb')
            })
            .catch()
        }
        
        // 删除模块
        const ul = document.querySelector('.left ul')
        // 委托
        ul.addEventListener('click',function(e){
            if(e.target.tagName === 'BUTTON'){
                // console.log(e.target.dataset.id);
                const id = e.target.dataset.id;
                // 调用axios删除
                deleteBookById(id)
            }
        })
        // 根据id删除图书的函数
        function deleteBookById(id){
            axios
            .delete(`https://hmajax.itheima.net/api/books/${id}`)
            .then((response)=>{
                // console.log(response.data.message);
                alert (response.data.message)
                // 重新渲染
                showData('lb')
            })
            .catch((response)=>{
                console.log(response);
            })
        }
    </script>
</body>
</html>
